<template>
  <div class="container-article">
    <!-- 筛选卡片 -->
    <el-card>
      <!-- 面包屑 -->
      <div slot="header">
        <my-bread>内容管理</my-bread>
      </div>
      <!-- 主题内容使用表单 -->
      <el-form ref="form" label-width="80px" size="small">
        <!-- 单选框组 -->
        <el-form-item label="状态">
          <el-radio-group v-model="reqParams.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 下拉菜单 -->
        <el-form-item label="频道:" >
         <my-channel v-model="reqParams.channel_id"></my-channel>
        </el-form-item>
        <!-- 事件选择空间控件 -->
        <el-form-item label="日期:">
          <el-date-picker
            v-model="dateArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 50%;"
            value-format="yyyy-MM-dd"
            @change="changeDate"
          ></el-date-picker>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button @click="filterArticles()" type="primary">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 文章展示部分 -->
    <el-card style="margin-top:20px">
        <div slot="header">根据筛选条件共查询到 {{total}} 条结果：</div>
        <el-table :data="articles">
        <el-table-column label="封面">
          <template slot-scope="scope">
            <el-image :src="scope.row.cover.images[0]" class="cover-image">
              <div slot="error" class="image-slot">
                <img src="../../assets/error.gif" alt="" class="cover-image">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
            <el-tag v-if="scope.row.status===1" >待审核</el-tag>
            <el-tag v-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-if="scope.row.status===4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- 编辑和删除按钮 -->
            <el-button @click="toEdit(scope.row.id)" type="primary" icon="el-icon-edit" circle plain></el-button>
            <el-button @click="delArticle(scope.row.id)" type="danger" icon="el-icon-delete" circle plain></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页按钮 -->
       <el-pagination style="margin-top:20px" background layout="prev, pager, next" :total="total"
        :page-size="reqParams.per_page"
        :current-page="reqParams.page"
         @current-change="changePager"
       ></el-pagination>
    </el-card>
  </div>
</template>
<script>
// 引入封装的面包屑
import MyBread from '@/components/my-bread.vue'
export default {
  name: "article-page",
  data(){
    return {
      total:0,
      dateArr:[],
      // 文章 
        articles:[],
        // 频道下拉选项
        
        reqParams:{
          status:null,
          channel_id:null,
          begin_pubdate:null,
          // 结束时间
          end_pubdate:null,
          // 当前页码
          page:1,
          // 每一页显示的条数
          per_page:20
      }
    }
  },
  created() {
    // 以下注释为测试代码
    // this.$http
    //   .get("/articles")
    //   .then(res => {})
    //   .catch(e => {
    //     console.log("请求失败", e);
    //   });
    
    this.getArticles()
  },
  methods:{
    // 筛选按钮点击事件
    filterArticles () {
      this.reqParams.page = 1
      this.getArticles()
    },
    // 编辑按钮点击事件
    toEdit(id){
      this.$router.push({path:'/publish',query:{id}});
    },
    // 删除文章
    delArticle (id) {
      this.$confirm('是否删除???','友情提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try{
          await this.$http.delete(`/articles/${id}`)
          // 删除成功,提示并且更新列表
          this.$message.success('删除成功')
          this.getArticles();
        }catch(e){
          this.$message.error('删除失败!!!')
        }
      })
    },
    
    // 获取结束和开始日期
    changeDate (dateArr) {
      // 判断事件段是否为空
      if(dateArr){
        this.reqParams.begin_pubdate =  dateArr[0]
        this.reqParams.end_pubdate = dateArr[1]
      }else{
          this.reqParams.begin_pubdate = null
          this.reqParams.end_pubdate = null
      }
    },
   
    // 获取文章列表
    async getArticles () {
      // 对象结构
      const {data:{data}} = await this.$http.get('/articles', { params: this.reqParams });
      
      this.articles = data.results
      
      this.total = data.total_count
    },
    // 分页
    changePager (newPage) {
      this.reqParams.page = newPage;
      this.getArticles();
    }
  }
};
</script>
<style lang='less' scoped>
  .cover-image {
     width: 180px;
     height: 120px;
  }
</style>